<script setup lang="ts">
import { computed, toRefs, watchPostEffect } from 'vue';
import { usePriceComponentStore } from '@/stores/priceComponentStore';
import type { PriceComponent } from '@/types';
import ValueInputField from '@/components/PriceComponent/ValueInputField.vue';
import LabelInputField from '@/components/PriceComponent/LabelInputField.vue';
import { validateFields } from '@/components/PriceComponent/utils';

type InputProps = {
  componentId: number;
};

const props = defineProps<InputProps>();
const priceComponentStore = usePriceComponentStore();

const { componentId } = toRefs(props);

const component = computed(
  () => priceComponentStore.components[componentId.value]
);

const hasMoreThanOneComponent = computed(
  () =>
    Object.values(priceComponentStore.components).filter(
      (component) => !component.isNew && !component.readonly
    ).length > 1
);

const canMove = computed(
  () =>
    hasMoreThanOneComponent.value &&
    !component.value.isNew &&
    !component.value.readonly
);

const handleUpdate =
  (key: keyof Pick<PriceComponent, 'label' | 'value'>) => (value: string) => {
    const newComponent = { ...component.value, [key]: value };

    if (
      newComponent.isNew &&
      validateFields(newComponent.label, newComponent.value)
    ) {
      newComponent.isNew = false;
    }

    priceComponentStore.updateComponent(componentId.value, newComponent);
  };

const handleLabelUpdate = handleUpdate('label');
const handleValueUpdate = handleUpdate('value');

const handleDelete = () =>
  priceComponentStore.removeComponent(componentId.value);
</script>

<template>
  <div
    class="price-component"
    :class="{
      'price-component--readonly': component.readonly,
      'price-component--new': component.isNew,
    }"
  >
    <div class="price-component__controls price-component__controls--left">
      <span v-if="canMove" class="material-icons" v-sort-handle>menu</span>
    </div>
    <div class="price-component__container">
      <LabelInputField
        :value="component.label"
        @change="handleLabelUpdate"
        :forceEdit="component.isNew"
      />
      <ValueInputField
        :value="component.value"
        @change="handleValueUpdate"
        :defaultFormattedValue="component.isNew ? '' : '0.0'"
      />
    </div>
    <div class="price-component__controls price-component__controls--right">
      <span class="material-icons" @click="handleDelete">delete</span>
    </div>
  </div>
</template>

<style lang="scss">
.price-component {
  --controls_display: block;
  --controls_opacity: 0;
  --border-color: black;

  width: 100%;
  position: relative;

  &--readonly {
    --controls_display: none;
  }

  &--new {
    --border-color: lightgray;
    --controls_display: none;
  }

  input {
    height: 25px;
    max-width: 150px;
    min-width: 150px;
    width: 150px;
    border: 1px solid var(--border-color);
  }

  &__controls {
    position: absolute;
    width: 25px;
    height: 25px;
    opacity: var(--controls_opacity);
    transition: opacity 0.2s;
    top: 0;

    &--left {
      left: -30px;
    }

    &--right {
      right: -30px;
    }

    span {
      display: var(--controls_display);
      cursor: pointer;
    }
  }

  &__container {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    align-items: center;
  }

  &__label {
    position: relative;

    .price-component__label-text {
      height: 25px;
      width: 150px;
      padding: 2px 4px;
      display: block;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .material-icons {
      position: absolute;
      display: var(--controls_display);
      opacity: var(--controls_opacity);
      cursor: pointer;
      transition: opacity 0.2s;
      width: 25px;
      height: 25px;
      top: 0;
      right: -37.5px;
    }
  }

  &:hover {
    --controls_opacity: 1;
  }
}
</style>
